<template>
     <div class="search-box">
      {{ form.createTime }}
    <div class="row" >
      <div class="left">
        <el-icon>
          <Search />
        </el-icon>
        <span>筛选搜索</span>
      </div>
      <div class="right">
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="searchHandle">查询搜索</el-button>
      </div>
    </div>
    <div class="row">
    <el-form :data="form" ref="formRef" :model="form" :rules="rules">
      <el-form-item label="输入搜索：" label-width="220px" prop="orderSn" >
        <el-input v-model="form.orderSn" placeholder="订单编号" max="50px" />
      </el-form-item>
      <el-form-item label="收货人：" label-width="220px" prop="receiverKeyword">
        <el-input v-model="form.receiverKeyword" placeholder="收货人姓名/手机号" />
      </el-form-item>
      <ElConfigProvider :locale="zhCn">
      <el-form-item label="提交时间：" label-width="220px" prop="createTime">
        <el-date-picker
        v-model="form.createTime"
        type="date"
        placeholder="选择时间"
        value-format="YYYY-MM-DD"
      />
      </el-form-item>
    </ElConfigProvider>
      <el-form-item label="订单状态：" label-width="220px" prop="status">
        <el-select v-model="form.status" clearable placeholder="全部">
    <el-option
      v-for="item in statusOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
      </el-form-item>
      <el-form-item label="订单分类：" label-width="220px" prop="orderType">
        <el-select v-model="form.orderType" clearable placeholder="全部">
    <el-option
      v-for="item in orderTypeOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
      </el-form-item>
      <el-form-item label="订单来源：" label-width="220px" prop="sourceType">
        <el-select v-model="form.sourceType" clearable placeholder="全部">
    <el-option
      v-for="item in sourceTypeOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
      </el-form-item>
      
    </el-form>
    </div>
</div>
    <el-table :data="list" @selection-change="handleSelectionChange" border
    table-layout="auto" cell-class-name="align-c">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="orderSn" label="订单编号" />
      <el-table-column prop="createTime" label="提交时间" >
        <template #default="{ row }">
        <span>{{ formateDate(row.createTime) }}</span>
      </template>
      </el-table-column>
      <el-table-column prop="memberUsername" label="用户账号" />
      <el-table-column prop="totalAmount" label="订单金额">
        <template #default="{ row }">
        <span>{{ "￥"+row.totalAmount }}</span>
      </template>
      </el-table-column>
      <el-table-column prop="payType" label="支付方式">
        <template #default="{row}">
          <span v-if="row.payType===0">未支付</span>
          <span v-else-if="row.payType===1">支付宝</span>
          <span v-else ="row.payType===1">微信</span>
        </template>
      </el-table-column>
      <el-table-column prop="sourceType" label="订单来源">
        <template #default="{row}">
          <span>
            {{ row.sourceType===0?"pc订单":"app订单" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="订单状态" >
        <template #default="{ row }">
          <span v-if="row.status===0">待付款</span>
          <span v-else-if="row.status===1">待发货</span>
          <span v-else-if="row.status===2">已发货</span>
          <span v-else-if="row.status===3">已完成</span>
          <span v-else-if="row.status===4">已关闭</span>
          <span v-else ="row.status===1">无效订单</span>
      </template>
      </el-table-column>
      <el-table-column prop="description" label="操作">
        <template #default="{ row }">
        <el-button        
          type="primary"
          v-permission="'allocRole'"
          @click="orderDetail(row.id)"
          >查看订单</el-button
        >
        <el-button      
          type="danger"
          >删除订单</el-button
        >
      </template>
      </el-table-column>
    </el-table>
    <ElConfigProvider :locale="zhCn">
    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="pageChangeHandle"
      @current-change="pageSizeChangeHandle"
    />
        </ElConfigProvider>
  </template>
  <script setup lang="ts">
  import useTable from "@/hooks/useTable";
  import { reactive,ref } from "vue";
  import { getOrderListApi } from "./api";
  import 'dayjs/locale/zh-cn'
  import { Search } from "@element-plus/icons-vue";
  import { ElConfigProvider, ElMessage, FormInstance, FormRules } from "element-plus";
  import zhCn from "element-plus/lib/locale/lang/zh-cn";
  import { formateDate } from "@/utils";
  import { useRouter } from "vue-router";
  const router = useRouter();
  
  const form = reactive({
    orderSn: "",
    createTime:"",
    orderType:"",
    receiverKeyword:"",
    sourceType:"",
    status:"",

  });

  const rules=reactive<FormRules>({
    orderSn: [],
    createTime:[],
    orderType:[],
    receiverKeyword:[],
    sourceType:[],
    status:[],
  })
  const formRef = ref<FormInstance>();
  const reset = ()=>{
    console.log(formRef.value)
    formRef.value?.resetFields();
    console.log("这个是重置后的",formRef.value);
    
    searchHandle()
  }

  const handleSelectionChange = (val:any) => {
  console.log(val[0].orderSn,"这是来测试多选获取的数据");//这是一个数组来着
  console.log(list.value[0].createTime,"6666666666");
  
  
}
  const orderDetail=(id:number)=>{
      console.log(12111,id);
  router.push("/oms/orderDetail?id=" + id);

  }
  const statusOptions = [
  {
    value: 0,
    label: '待付款',
  },
  {
    value: 1,
    label: '待发货',
  },
  {
    value: 2,
    label: '已发货',
  },
  {
    value: 3,
    label: '已完成',
  },
  {
    value: 4,
    label: '已关闭',
  },
  {
    value: 5,
    label: '无效订单',
  },
]
  const orderTypeOptions = [
  {
    value: 0,
    label: '正常订单',
  },
  {
    value: 1,
    label: '秒杀订单',
  },
]
  const sourceTypeOptions = [
  {
    value: 0,
    label: 'PC订单',
  },
  {
    value: 1,
    label: 'app订单',
  },
]


  const {
    list,
    pageNum,
    pageSize,
    total,
    pageChangeHandle,
    pageSizeChangeHandle,
    searchHandle,
  } = useTable(getOrderListApi, form);
  </script>
  <style lang="less" scoped>
  :deep(.cell) {
  
    text-align: center !important;
  
}
  :deep(.asterisk-left){
    width: 350px;
    // display: block;
    // margin-right: 40px;
    padding: 0;
  }
  :deep(.el-form){
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
  }
    .search-box {
  box-shadow: 0 0 4px 2px #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  .row {
    padding: 20px 0;
    display: flex;
    &:first-child {
        justify-content: space-between;
    }
    &:last-child {
    //   width: 100px;
      justify-content: space-between;
    }
  }
}
</style>
  